<template>
  <van-list class="bif" v-model:loading="pageData.loading" :finished="pageData.loadfished" finished-text="没有更多了"
    @load="getNextPage">
    <div class="list" v-for="jslist in pageData.lists" :key="jslist.id">
      <div class="text1">
        <span class="nickname">昵称: {{ jslist.nickname }}</span>
        <span class="place">
          <Position class="position" />
          {{ jslist.ip_location.slice(0, 6) }}
        </span>
        <span class="time">{{ jslist.create_time.slice(6, 19) }}</span>
      </div>

      <div class="toptow">
        <span class="name">{{ jslist.good_name }}</span>
        <div class="phone" v-for="(value, key) in jslist.good_desc" :key="key">
          <span v-if="phone.includes(key)">{{ value }}</span>
        </div>
      </div>

      <div class="Machine">
        <div class="title">
          <span class="bar">机况</span>
          <span class="price">
            {{ jslist.price }}</span>
        </div>
        <div class="center">
          <div class="structure" v-for="(value, key) in jslist.good_desc" :key="key">
            <span v-if="!phone.includes(key)">{{ key }}：{{ value }}</span>
          </div>
        </div>
      </div>
    </div>
    <van-back-top class="backTop" />
  </van-list>

</template>

<script setup lang="ts">
import { APIManager } from '@/api';
import { nextTick, reactive, ref, watch } from "vue";
import { useLazyloading } from "@/hooks/methods/use-lazyloading";
import Position from '@/icon/position.vue';

// const Machine = ['边框/盖板/后壳', '屏幕外观', '屏幕显示', '维修情况']
const phone = ['颜色', '配置']

const props = defineProps({
  keyword: {
    type: String,
    default: ''
  }
})

const params = reactive({
  keyword: props.keyword,
});

// 懒加载数据
const { pageData, getLists, getNextPage, reset } = useLazyloading({
  fetchFun: APIManager.getGoodsList,
  listKey: 'lists',
  params: params
})

watch(() => props.keyword, (value) => {
  params.keyword = value;
  reset()
})

nextTick(async () => {
  await getLists();
})

const refreshing = ref(false);


</script>

<style>
.position {
  color: #f97136;
}

.Machine {
  margin-top: 5px;
  width: 100%;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  background-color: #ffedd5;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  font-size: 1.3em;

  .title {
    border-bottom: 1px solid #f97136;
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    padding-left: 5px;
    box-sizing: border-box;
    justify-content: space-between;
  }

  .structure {
    display: flex;
    flex-direction: column;

    >span {
      width: 100%;
    }
  }
}


.list {
  padding: 10px 30px;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  font-size: 12px;
}

.up {
  height: 100%;

}

.bif {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 10px;
  flex-direction: column;
  background-color: #f5f4f9;
  overflow-y: auto;
}

.bif::-webkit-scrollbar {
  display: none;
}

.text1 {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #f7f8fa;

  .time {
    font-size: 1.3em;
  }
}

.price {
  /* color: #ef3434; */
  align-items: center;
  margin-right: 5px;
}

.nickname {
  font-size: 1.3em;
}

.place {
  /* color: #999999; */
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 1.3em;
}

.toptow {
  display: flex;
  justify-content: space-between;
  color: #f97136;
  align-items: center;
  font-size: 1.3em;
}

.name {
  font-weight: 700;
}

.phone {
  font-weight: 700;
}

.center {
  padding: 10px;
}


.moneyLogo {
  width: 14px;
}

.backTop {
  background-color: #f97136;
}
</style>
